/**
 * 登录页组件
 */
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/login'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import http from '@/axios/http'

const router = useRouter()

const loginStore = useLoginStore()

const password = ref()
const isLoading = ref(false)
const remember = ref(true)

const loginForm = ref()

const loginData = reactive({
  username: localStorage.getItem("username") ? localStorage.getItem("username") : "",
  password: localStorage.getItem("password") ? localStorage.getItem("password") : ""
})

const loginRule = reactive({
  username: [{
    trigger: "blur",
    required: true,
    message: "用户名不能为空！"
  }],
  password: [{
    trigger: "blur",
    required: true,
    message: "密码不能为空！"
  }]
})

function login() {
  loginForm.value.validate(valid => {
    if (!valid) {
      return false
    } else {
      isLoading.value = true

      http.post("/login/getUser", {
        username: loginData.username,
        password: loginData.password
      }).then(res => {
        if (res.data.state) {
          if (remember.value) {
            localStorage.setItem("username", loginData.username)
            localStorage.setItem("password", loginData.password)
          } else {
            localStorage.removeItem("username")
            localStorage.removeItem("password")
          }
          loginStore.isLogin = true
          sessionStorage.setItem("token", res.data.token)
          router.push({ name: 'home' })
          // eslint-disable-next-line no-undef
          ElMessage({
            message: res.data.msg,
            type: 'success',
            duration: 1500
          })
        } else {
          // eslint-disable-next-line no-undef
          ElMessage({
            message: res.data.msg,
            type: 'error',
            duration: 1500
          })
        }
      }).catch(err => {
        // eslint-disable-next-line no-undef
        ElMessage({
          message: '请求出错！请检查网络！',
          type: 'error',
          duration: 1500
        })
        console.log(err)
      }).finally(() => {
        isLoading.value = false
      })
    }
  })
}

onMounted(() => {
  if (!loginStore.isLogin) {
    // eslint-disable-next-line no-undef
    ElMessage({
      message: '请进行登录！',
      type: 'warning',
      duration: 3000
    })
  }
})
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-title">
        <span>IE效率分析</span>
      </div>

      <div class="login-form">
        <el-form
          ref="loginForm"
          :model="loginData"
          :rules="loginRule"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginData.username"
              @keydown.enter="password.focus()"
              placeholder="请输入用户名"
              :prefix-icon="UserFilled"
              size="large"
              style="width: 350px; font-size: 2vh;"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="loginData.password"
              @keydown.enter="login"
              type="password"
              show-password
              placeholder="请输入密码"
              :prefix-icon="Lock"
              size="large"
              style="width: 350px; font-size: 2vh;"
            />
          </el-form-item>

          <el-form-item style="margin-top: -5%; margin-bottom: 0;">
            <el-switch
              v-model="remember"
              inline-prompt
              active-text="是"
              inactive-text="否"
            />
            <span style="margin-left: 10px; color: white;">记住密码</span>
          </el-form-item>

          <el-form-item>
            <el-button
              @click="login"
              color="#626aef"
              :loading="isLoading"
              round
              size="large"
              style="width: 350px; font-size: 2vh; font-weight: normal; margin-top: 5px;"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("@/assets/images/Stella.png") no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.25s ease-in-out;

  &:focus-within {
    // hue-rotate(15deg): 色相旋转, saturate(150%): 饱和度, contrast(120%): 对比度
    filter: saturate(150%) contrast(120%);
  }

  &:focus-within .login-box {
    box-shadow: 0 0 10px 2px white;
  }

  .login-box {
    width: 500px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1px 0 white;
    border-radius: 15px;
    transition: all 0.25s ease-in-out;

    .login-title {
      font-size: 3.5vh;
      font-weight: normal;
      text-align: center;
      margin-bottom: 10%;
      color: white;
    }

    .login-form {
      &:deep(.el-form-item__content) {
        justify-content: center;
      }
    }
  }
}
</style>